<!-- 侧边导航栏组件3.0 -->

<!--
1.所有自定义属性在传入属性中有注释，按需更改便可。
2.但点击选中的状态 （changeClik） +鼠标移入的状态样式 （mousIn）因每次遇到情况不一，故则请使用者，在css中自行修改。
3.本组件最大支持三层成员展示，故 showList 渲染数组一个成员对象，最大套用三层（即连续两个children内部嵌套数组）。
4.此组件才用的是原生css，并不会造成node版本兼容问题，若是需要换成less或sass，则自行修改。
5.影藏成员样式，本人因个人倔强，样式不愿意调整，故使用者按需在css中修改 （sideNavigation-hide  ~ sideNavigation-hide-son-sub:hover）
-->

<!-- 传入属性 -->
<!--
showList:渲染数组  title：每个成员的名称  
                   icon：最外层及父级左边未选中时图标  （注意：只有最外层父级有这两个属性，其他没有，不需要填写）
                   changeIcon：最外层及父级左边选中时图标 （注意：只有最外层父级有这两个属性，其他没有，不需要填写）
                   url：每个成员跳转的页面地址，有则添加，没有就不用添加
                   children：嵌套的内容数组，若有需要嵌套的内容，则按照以下示例添加，没有则不用
          例:[
          {
            title: "用户统计",
            icon: "https://oss4.komect.com/equity-gs/cms/home/index_ic_yhtj.png",
            changeIcon:
              "https://oss4.komect.com/equity-gs/cms/home/index_ic_yhtj_xz.png",
            url: "",
            children: [
              {
                title: "新增用户",
                url: "",
                children: [
                  { title: "新增用户", url: "123" },
                  { title: "活跃用户", url: "321" },
                ],
              },
              { title: "活跃用户", url: "456" },
            ],
          },]

defIndex:默认选中位置(传入坐标位置信息 例：'0-1-1')
arrowsImg:未选中箭头图片 默认 https://oss4.komect.com/equity-gs/cms/home/index_ic_xl.png
arrowsChangeImg:选中箭头图片 默认 https://oss4.komect.com/equity-gs/cms/home/index_ic_xl_xz.png

样式属性
-------------------------------------------------------------------------------------------------
综合样式
======================================================================
sideWidth: 自定义整体宽度  默认230px
sideHeight:自定义整体高度  默认900px
sideBackColor:自定义整体背景颜色  默认#19203c
itemHeight:自定义成员高度  59px(含下边框则是60px)

字体样式
======================================================================
sideColor:自定义字体颜色  默认#fff
sideSize:自定义字体大小  默认16px
sideWeight:自定义字体宽度  默认400

成员下边框样式
======================================================================
sideBottomColor:下边框颜色   默认#2b314c
sideBottomStyle:下边框类型   默认solid
sideBottomWidth:下边框宽度     默认1px
   
判断属性+功能属性
-------------------------------------------------------------------------------------------------
****changeShowList:  **若需改变渲染数组时，传递的信息**（可以是任意值，但要保证每次变化不一样，这样就可以实现实时变化）****
ifOpenOne:是否开启单窗口展示模式（true开启  false关闭）  默认false
ifOpenShrink:默认是否打开收缩模式侧边导航栏模式  （true开启  false关闭）  默认false
-->

<!-- 传入方法 -->
<!-- SNclick:传入属性为对应的 位置信息index 点击的跳转地址信息url 

     若需自定义外部打开或关闭收缩功能（ifOpenShrink），建议使用ref进行使用
     例子：
         <side-navigations ref="navigations"></side-navigations>
         配套的函数中使用：（即可实现外部开关进行打开关闭）
         this.$refs.navigations.changeShrink();-->

<template>
  <!-- 外层区域 -->
  <!-- 可自定义  
       sideBackColor:最外层的背景颜色（底色） 
       sideColor:所有的字体颜色
       sideSize：字体大小
       sideWeight：字体宽度
       sideWidth：整体的宽度
       sideHeight：整体的宽度 -->
  <div
    class="sideNavigation"
    :style="[
      { backgroundColor: sideBackColor },
      { color: sideColor },
      { fontSize: sideSize + 'px' },
      { fontWeight: sideWeight },
      { width: sideWidth + 'px' },
      { height: sideHeight + 'px' },
    ]"
    id="sideNavigation"
    @mouseleave="sideMousleave"
  >
    <!-- 循环父级区域 -->
    <!-- ------------------------------------------------------------------------------------------------------------------ -->
    <div
      v-for="(value, index) in showList"
      class="sideNavigationBox"
      :style="[
        {
          overflow: ifOpenShrinks ? '' : 'hidden',
        },
      ]"
      :key="index"
      :id="'s' + index"
    >
      <!-- 父级内容区域 -->
      <!-- ------------------------------------------------------------------------------------------------- -->
      <!-- 可自定义  
       itemHeight:父级成员高度 
       sideBottomColor:底部边框颜色
       sideBottomStyle：底部边框样式（实现或者虚线）
       sideBottomWidth：底部边框宽度-->
      <div
        class="sideNavigation-parents"
        :class="{
          changeClik: ifOpenShrinks
            ? indexLists == index
              ? true
              : false
            : clickindex == index
            ? true
            : false,
          mousIn: acceptIndex == index ? true : false,
        }"
        :style="[
          { height: itemHeight + 'px' },
          { borderBottomColor: sideBottomColor },
          { borderBottomStyle: sideBottomStyle },
          { borderBottomWidth: sideBottomWidth + 'px' },
        ]"
        @click="sideNavClick(index, value.url, value.children)"
        @mouseenter="sideNavMouse(index)"
      >
        <!-- 未选中时图片样式 -->
        <div
          class="sideNavigation-parents-image"
          :style="{ backgroundImage: 'url(' + value.icon + ')' }"
          v-show="ifOpenShrinks ? indexLists != index : clickindex != index"
        ></div>
        <!-- 选中时图片样式 -->
        <div
          class="sideNavigation-parents-image"
          :style="{ backgroundImage: 'url(' + value.changeIcon + ')' }"
          v-show="ifOpenShrinks ? indexLists == index : clickindex == index"
        ></div>

        <!-- 名称 -->
        <!-- =================================================================== -->
        <div class="sideNavigation-parents-name" v-show="!ifOpenShrinks">
          {{ value.title }}
        </div>

        <!-- 箭头 -->
        <!-- =================================================================== -->
        <!-- 未选中时箭头样式 -->
        <div
          class="sideNavigation-parents-arrows"
          v-show="
            clickindex != index &&
            value.children &&
            value.children.length != 0 &&
            !ifOpenShrinks
          "
          :id="'s' + index + 'no'"
          :style="{
            backgroundImage: 'url(' + arrowsImg + ')',
          }"
        ></div>
        <!-- 选中时箭头样式 -->
        <div
          class="sideNavigation-parents-arrows"
          v-show="
            clickindex == index &&
            value.children &&
            value.children.length != 0 &&
            !ifOpenShrinks
          "
          :id="'s' + index + 'yes'"
          :style="{
            backgroundImage: 'url(' + arrowsChangeImg + ')',
          }"
        ></div>
      </div>

      <!-- 循环子级 -->
      <!-- ------------------------------------------------------------------------------------------------------------------ -->
      <div
        v-for="(val, ind) in value.children"
        :key="ind"
        class="sideNavigationBox-son"
        :id="'s' + index + '-' + ind"
        v-show="!ifOpenShrinks"
      >
        <div
          class="sideNavigation-sub"
          :class="{
            changeClik: clickindex == index + '-' + ind ? true : false,
            mousIn: acceptIndex == index + '-' + ind ? true : false,
          }"
          :style="[
            { height: itemHeight + 'px' },
            { borderBottomColor: sideBottomColor },
            { borderBottomStyle: sideBottomStyle },
            { borderBottomWidth: sideBottomWidth + 'px' },
          ]"
          @click="sideNavClick(index + '-' + ind, val.url, val.children)"
          @mouseenter="sideNavMouse(index + '-' + ind)"
        >
          <!-- 名称 -->
          <!-- =================================================================== -->
          <div class="sideNavigation-sub-name">
            <span>{{ val.title }}</span>

            <!-- 箭头 -->
            <!-- =================================================================== -->
            <!-- 未选中时箭头样式 -->
            <div
              class="sideNavigation-sub-arrows"
              v-show="
                clickindex != index + '-' + ind &&
                val.children &&
                val.children.length != 0
              "
              :id="'s' + index + '-' + ind + 'no'"
              :style="{
                backgroundImage: 'url(' + arrowsImg + ')',
              }"
            ></div>
            <!-- 选中时箭头样式 -->
            <div
              class="sideNavigation-sub-arrows"
              v-show="
                clickindex == index + '-' + ind &&
                val.children &&
                val.children.length != 0
              "
              :id="'s' + index + '-' + ind + 'yes'"
              :style="{
                backgroundImage: 'url(' + arrowsChangeImg + ')',
              }"
            ></div>
          </div>
        </div>

        <!-- 循环孙级 -->
        <!-- ------------------------------------------------------------------------------------------------------------------ -->
        <!-- 名称 -->
        <!-- =================================================================== -->
        <div
          v-for="(v, i) in val.children"
          :key="i"
          :class="{
            changeClik:
              clickindex == index + '-' + ind + '-' + i ? true : false,
            mousIn: acceptIndex == index + '-' + ind + '-' + i ? true : false,
          }"
          :style="[
            { height: itemHeight + 'px' },
            { borderBottomColor: sideBottomColor },
            { borderBottomStyle: sideBottomStyle },
            { borderBottomWidth: sideBottomWidth + 'px' },
          ]"
          class="sideNavigation-sun"
          @click="sideNavClick(index + '-' + ind + '-' + i, v.url)"
          @mouseenter="sideNavMouse(index + '-' + ind + '-' + i)"
        >
          <span>{{ v.title }}</span>
        </div>
      </div>

      <!-- 侧边导航栏收起时展示的其成员组织 -->
      <!-- ------------------------------------------------------------------------------------------------------------------ -->
      <div
        class="sideNavigation-hide"
        v-show="acceptIndex == index && ifOpenShrinks"
      >
        <!-- 子级内容展示 -->
        <div v-for="(val, ind) in value.children" :key="ind">
          <div
            class="sideNavigation-hide-son"
            :class="{
              changeClik: clickindex == index + '-' + ind ? true : false,
            }"
            @click="sideNavClick(index + '-' + ind)"
          >
            <span>{{ val.title }}</span>
          </div>
          <!-- 孙级成员展示 -->
          <div
            class="sideNavigation-hide-son-sub"
            v-for="(v, i) in val.children"
            :key="i"
            :class="{
              changeClik:
                clickindex == index + '-' + ind + '-' + i ? true : false,
            }"
            @click="sideNavClick(index + '-' + ind + '-' + i)"
          >
            {{ v.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 渲染数组
    showList: {
      type: [Array],
      default() {
        return [];
      },
    },

    // 默认选中位置
    defIndex: {
      type: [String, Number],
      default: "0-1",
    },

    // 未选中箭头图片
    arrowsImg: {
      type: [String],
      default: "https://oss4.komect.com/equity-gs/cms/home/index_ic_xl.png",
    },

    // 选中箭头图片
    arrowsChangeImg: {
      type: [String],
      default: "https://oss4.komect.com/equity-gs/cms/home/index_ic_xl_xz.png",
    },

    // 样式属性
    // -------------------------------------------------------------------------------------------------
    // 综合样式
    // ======================================================================
    // 自定义整体宽度  默认230px
    sideWidth: {
      type: [String, Number],
      default: 230,
    },
    // 自定义整体高度  默认900px
    sideHeight: {
      type: [String, Number],
      default: 900,
    },
    // 自定义整体背景颜色  默认#19203c
    sideBackColor: {
      type: [String],
      default: "#19203c",
    },
    // 自定义成员高度  59px(含下边框则是60px)
    itemHeight: {
      type: [String, Number],
      default: 59,
    },

    // 字体样式
    // ======================================================================
    // 自定义字体颜色  默认#fff
    sideColor: {
      type: [String],
      default: "#f2f7fc",
    },
    // 自定义字体大小  默认16px
    sideSize: {
      type: [String, Number],
      default: 16,
    },
    // 自定义字体宽度  默认400
    sideWeight: {
      type: [String, Number],
      default: 400,
    },

    // 成员下边框样式
    // ======================================================================
    // 下边框颜色   默认#2b314c
    sideBottomColor: {
      type: [String],
      default: "#2b314c",
    },
    // 下边框类型   默认solid
    sideBottomStyle: {
      type: [String],
      default: "solid",
    },
    // 下边框宽度     默认1px
    sideBottomWidth: {
      type: [String, Number],
      default: 1,
    },

    // 判断属性+功能属性
    // -------------------------------------------------------------------------------------------------
    // 若需改变渲染数组时，传递的信息（可以是任意值，但要保证每次变化不一样，这样就可以实现实时变化）
    changeShowList: {
      type: [String, Number],
      default: "",
    },

    // 是否开启单窗口展示模式（true开启  false关闭）  默认false
    ifOpenOne: {
      type: [Boolean],
      default: true,
    },

    // 默认是否打开收缩模式侧边导航栏模式  （true开启  false关闭）  默认false
    ifOpenShrink: {
      type: [Boolean],
      default: false,
    },
  },
  data() {
    return {
      // 点击位置保存信息
      clickindex: "",
      // 承接移动位置信息
      acceptIndex: "",
      // 承接数组变化信息值
      indexLists: "",
      // 承接收缩模式改变值
      ifOpenShrinks: false,
      // 同步整体高度（成员高度+底部边框高度）承接值
      theHeight: 0,
    };
  },
  created() {
    // 同步默认选中的位置信息
    this.clickindex = this.defIndex;
    // 默认是否打开收缩模式侧边导航栏模式
    this.ifOpenShrinks = this.ifOpenShrink;
    // 同步整体高度（成员高度+底部边框高度）
    this.theHeight = this.itemHeight + this.sideBottomWidth;
  },
  mounted() {
    // 调取恢复默认状态函数
    this.defaultRecovery();
  },
  watch: {
    // 监听  changeShowList  发生改变时，初始化其渲染数组
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    changeShowList() {
      // 调取恢复默认状态函数
      this.defaultRecovery();
    },

    // 监听  选择位置 clickindex 的变化 用于向父级传递函数
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    clickindex() {
      let url = "";
      // 解析点击的位置信息，拆解成数组，方便后续判断
      let indexList = String(this.clickindex).split("-");
      // 承接数组变化信息值赋值
      this.indexLists = indexList[0];

      // 判断此解析数组 indexList 长度
      if (indexList.length == 1) {
        // 当长度为1时，则取第一位查看其是否带有url
        this.showList[indexList[0]].url
          ? (url = this.showList[indexList[0]].url)
          : (url = "");
      } else if (indexList.length == 2) {
        // 当长度为2时，则取第一位+第二位带入数组showList查看url
        this.showList[indexList[0]].children[indexList[1]].url
          ? (url = this.showList[indexList[0]].children[indexList[1]].url)
          : (url = "");
      } else {
        // 当长度为3时，则取第一位+第二位+第三位带入数组showList查看url
        this.showList[indexList[0]].children[indexList[1]].children[
          indexList[2]
        ].url
          ? (url =
              this.showList[indexList[0]].children[indexList[1]].children[
                indexList[2]
              ].url)
          : (url = "");
      }

      // 传入属性为对应的 位置信息index  点击的跳转地址信息url
      this.$emit("SNclick", { index: this.clickindex, url: url });
    },

    // 监听  ifOpenShrinks  是否打开收缩模式侧边导航栏模式的变化
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    ifOpenShrinks() {
      // 调取恢复默认状态函数
      this.defaultRecovery();
    },
  },
  methods: {
    // 父级最外层鼠标移出事件
    sideMousleave() {
      // 初始化位置信息
      // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
      this.acceptIndex = "false";
    },

    // 成员点击事件  (index:点击的位置信息 url:点击的跳转地址信息 child:子级循环数组
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    sideNavClick(index, url, child) {
      // 同步点击的位置信息
      this.clickindex = index;

      // 变量声明区域
      // ------------------------------------------------------------------------------------------------------------------------
      // 解析点击的位置信息，拆解成数组，方便后续判断
      let indexList = String(index).split("-");

      // 父级变量
      // ============================================================================================
      // 默认父级高度值，用于箭头方向转变
      let arrowShow = 0;
      // 获取父级的id
      let parentId = document.getElementById("s" + indexList[0]);
      // 获取父级循环区域的高度
      let parentHeight = parentId.clientHeight;

      // 子级变量
      // ============================================================================================
      // 默认子级高度值，用于箭头方向转变
      let arrowSonShow = 0;
      // 获取子级的id
      let sonId = document.getElementById(
        "s" + indexList[0] + "-" + indexList[1]
      );
      // 获取子级循环区域的高度
      let sonHeight = sonId ? sonId.clientHeight : "";

      // 逻辑判断区域
      // ------------------------------------------------------------------------------------------------------------------------
      // 判断级成员是否进行打开或关闭
      // 根据indexList此数组的长度 与  child是否存在，并且child存在有值 与  indexList长度为1 进行判断
      // ============================================================================================
      if (
        child &&
        child.length != 0 &&
        indexList.length == 1 &&
        !this.ifOpenShrinks
      ) {
        // 承接此数组中所有成员的信息
        let parentChildNum = 1;

        // 判断是否有子级数组children
        if (this.showList[index].children) {
          // 给parentChildNum赋予带有的children的长度
          parentChildNum += this.showList[index].children.length;

          // 对children进行循环，获取其含有的children数组的长度
          this.showList[index].children.forEach((value) => {
            // 如果有则给此parentChildNum添加这个数组的长度
            value.children
              ? (parentChildNum += value.children.length)
              : (parentChildNum = parentChildNum);
          });
        }
        // 判断此时父级的高度是否是大于设定的高度
        if (parentHeight > this.theHeight) {
          // 是则让其复原为 this.theHeight
          parentId.style.height = this.theHeight + "px";
          // 给arrowShow赋值
          arrowShow = this.theHeight;

          // 循环内部子级数组
          this.showList[index].children.forEach((val, ind) => {
            // 判断是否存在孙级数组
            if (val.children) {
              // 创建一个变量sonLeng，用于实现每个子级高度定取
              let sonLeng = 1 + val.children.length;
              document.getElementById("s" + index + "-" + ind).style.height =
                sonLeng * this.theHeight + "px";
            }
          });
        } else {
          // 否则则让其恢复成原本的高度
          parentId.style.height = parentChildNum * this.theHeight + "px";
          // 给arrowShow赋值
          arrowShow = parentChildNum * this.theHeight;
        }

        // 判断是否开启了单窗口展示
        if (this.ifOpenOne) {
          // 循环渲染数组showList中是否有此位置信息
          this.showList.forEach((v, i) => {
            if (i != index) {
              document.getElementById("s" + i).style.height =
                this.theHeight + "px";

              // 循环内部子级数组
              this.showList[i].children.forEach((val, ind) => {
                // 判断是否存在孙级数组
                if (val.children) {
                  // 创建一个变量sonLeng，用于实现每个子级高度定取
                  let sonLeng = 1 + val.children.length;
                  document.getElementById("s" + i + "-" + ind).style.height =
                    sonLeng * this.theHeight + "px";
                }
              });
            }
          });
        }

        // 判断arrowShow的大小 用于改变对于的箭头方向 调取箭头改变函数
        this.arrows(arrowShow, index);

        // 判断子级成员是否进行打开或关闭
        // ============================================================================================
      } else if (
        child &&
        child.length != 0 &&
        indexList.length == 2 &&
        !this.ifOpenShrinks
      ) {
        // 承接此数组中所有成员的信息
        let sonChildNum = 1;

        // 判断是否有孙级数组children
        if (
          this.showList[Number(indexList[0])].children[Number(indexList[1])]
            .children
        ) {
          // 给parentChildNum赋予带有的children的长度
          sonChildNum +=
            this.showList[Number(indexList[0])].children[Number(indexList[1])]
              .children.length;
        }

        // 判断此时改成员的高度
        if (sonHeight > this.theHeight) {
          sonId.style.height = this.theHeight + "px";
          parentId.style.height =
            parentHeight - sonHeight + this.theHeight + "px";
          // 给arrowSonShow赋值，用于确定箭头方向
          arrowSonShow = this.theHeight;
        } else {
          sonId.style.height = sonChildNum * this.theHeight + "px";
          parentId.style.height =
            parentHeight + (sonChildNum - 1) * this.theHeight + "px";
          // 给arrowSonShow赋值，用于确定箭头方向
          arrowSonShow = sonChildNum * this.theHeight;
        }

        // 判断arrowSonShow的大小 用于改变对于的箭头方向 调取箭头改变函数
        this.arrows(arrowSonShow, index);
      }
    },

    //   鼠标移入事件
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    sideNavMouse(index) {
      // 同步选择的位置信息
      this.acceptIndex = index;
    },

    // 改变箭头方向函数
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    arrows(heg, index) {
      if (heg > this.theHeight) {
        // 改变选中箭头方向
        document.getElementById("s" + index + "yes").style.transform =
          "rotate(180deg)";
        // 改变未选中箭头方向
        document.getElementById("s" + index + "no").style.transform =
          "rotate(0deg)";
      } else {
        // 改变选中箭头方向
        document.getElementById("s" + index + "yes").style.transform =
          "rotate(0deg)";
        // 改变未选中箭头方向
        document.getElementById("s" + index + "no").style.transform =
          "rotate(180deg)";
      }
    },

    // 恢复默认状态函数
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    defaultRecovery() {
      // 承接默认选中的位置信息，变成数组
      let strDefList = String(this.clickindex).split("-");

      // 循环渲染数组showList ，将其每个成员都赋予初始的高度值，方便添加动画效果
      // ------------------------------------------------------------------------------------------------------------------------
      this.showList.forEach((value, index) => {
        // 其子级中所有成员数量的承接值
        let leng = 1;

        // 判断是否存在子级数组
        // ============================================================================================
        if (value.children) {
          leng += value.children.length;

          // 循环内部子级数组
          value.children.forEach((val, ind) => {
            // 判断是否存在孙级数组
            if (val.children) {
              // 存在则给leng长度+1
              leng += val.children.length;

              // 创建一个变量sonLeng，用于实现每个子级高度定取
              let sonLeng = 1 + val.children.length;
              document.getElementById("s" + index + "-" + ind).style.height =
                sonLeng * this.theHeight + "px";
              // 判断leng *this.theHeight 的大小 用于改变对于的父级箭头方向 调取箭头改变函数
              this.arrows(sonLeng * this.theHeight, index);
            }
          });
        }

        // 判断是否开启了单窗口展示模式  并且  收缩状态没有打开
        // ============================================================================================
        if (this.ifOpenOne && !this.ifOpenShrinks) {
          // 判断目前的位置和默认选中的位置数组首位是否相等
          index == strDefList[0]
            ? // 是的话将其高度变成应该有的高度信息
              (document.getElementById("s" + index).style.height =
                leng * this.theHeight + "px")
            : // 其他的则变成默认高度
              (document.getElementById("s" + index).style.height =
                this.theHeight + "px");

          // 不开启单窗口模式的话，则对所有成员进行赋予高度
        } else if (!this.ifOpenOne && !this.ifOpenShrinks) {
          // 给每个成员赋予高度值
          document.getElementById("s" + index).style.height =
            leng * this.theHeight + "px";
        }

        // 判断是否开启了收缩状态
        // ============================================================================================
        if (this.ifOpenShrinks) {
          // 给每个成员赋予高度值 全部高度变成默认值
          document.getElementById("s" + index).style.height =
            this.theHeight + "px";
          document.getElementById("sideNavigation").style.width = 50 + "px";
        } else {
          // 恢复默认宽度 sideWidth
          document.getElementById("sideNavigation").style.width =
            this.sideWidth + "px";
        }

        // 判断leng * this.theHeight 的大小 用于改变对于的父级箭头方向 调取箭头改变函数
        this.arrows(leng * this.theHeight, index);
      });
    },

    // 收缩状态改变函数
    changeShrink() {
      this.ifOpenShrinks = !this.ifOpenShrinks;
    },
  },
};
</script>

<style scoped>
/* 侧边导航栏组件 */
.sideNavigation {
  position: relative;
  /* 字体样式 */
  font-family: PingFangSC, PingFangSC-Regular;
  transition: all 0.4s;
  /* overflow-x: hidden; */
}

.sideNavigationBox {
  width: 100%;
  transition: all 0.4s;
  position: relative;
}

/* 父级外层 */
/* --------------------------------------------------------------------------------------- */
.sideNavigation-parents {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
/* 图片样式 */
.sideNavigation-parents-image {
  width: 19px;
  height: 19px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 17px 0 9px;
}

/* 箭头样式(父级+子级) */
.sideNavigation-parents-arrows,
.sideNavigation-sub-arrows {
  width: 12px;
  height: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: 18px;
  transition: all 0.4s;
}

/* 子级外层 */
/* --------------------------------------------------------------------------------------- */
.sideNavigationBox-son {
  width: 100%;
  overflow: hidden;
  transition: all 0.4s;
}
.sideNavigation-sub {
  width: 100%;
  transition: all 0.6s;
}

/* 名称 */
.sideNavigation-sub-name {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.sideNavigation-sub-name span {
  margin-left: 42px;
}

/* 孙级外层 */
/* --------------------------------------------------------------------------------------- */
.sideNavigation-sun {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.6s;
}
.sideNavigation-sun-name {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.sideNavigation-sun span {
  margin-left: 62px;
}

/* 侧边导航栏收起时展示的其成员组织 */
/* --------------------------------------------------------------------------------------- */
.sideNavigation-hide {
  position: absolute;
  top: 0;
  right: -120px;
  width: 120px;
  background: #000;
  color: #f2f7fc;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.6s inherit;
}

/* 子级内容展示 */
.sideNavigation-hide-son,
.sideNavigation-hide-son-sub {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: solid 1px #2b314c;
}

.sideNavigation-hide-son > span {
  display: inline-block;
  margin-left: 20px;
}

/* 孙级成员展示 */
.sideNavigation-hide-son-sub {
  justify-content: center;
}

/* 隐藏成员hover样式 */
.sideNavigation-hide-son:hover,
.sideNavigation-hide-son-sub:hover {
  background: #808080;
  font-weight: bold;
}

/* 选中时样式 */
/* --------------------------------------------------------------------------------------- */
.changeClik {
  font-weight: 500;
  color: #00a0ff;
  background-color: rgba(28, 45, 83, 0.6);
  transition: all 0.4s;
}

/* 鼠标移入时的样式 */
.mousIn {
  background-color: rgba(28, 45, 83, 0.6);
}
</style>
